<template>
  <div class="app-container">
    <a-card size="small" :bordered="false" class="box-card">
      <template #title>
        <header class="titleHeader">
          <div class="titleLeft">
            点评列表
            <ExclamationCircleOutlined />
          </div>
          <div class="titleLeft">
            <a-button
              class="search_Button confirm"
              :icon="h(SyncOutlined)"
              type="primary"
              @click="refreshData"
              >刷新数据</a-button
            >
          </div>
        </header>
      </template>
      <div class="app-container">
        <a-form ref="formRef" :model="formState" layout="inline">
          <a-form-item ref="name" label="用户名称" name="name">
            <a-input
              v-model:value="formState.name"
              class="my-input"
              placeholder="请输入用户名称"
            />
          </a-form-item>
          <a-form-item ref="name" label="关键词" name="keyword">
            <a-input
              v-model:value="formState.keyword"
              class="my-input"
              placeholder="请输入关键词"
            />
          </a-form-item>
          <a-form-item label="点评时间" name="date1">
            <a-range-picker v-model:value="formState.date1" />
          </a-form-item>
          <a-form-item label="游戏评分" name="region">
            <a-select
              v-model:value="formState.region"
              placeholder="请选择"
              class="my-input"
            >
              <a-select-option value="shanghai">全部</a-select-option>
              <a-select-option value="beijing">未发布</a-select-option>
            </a-select>
          </a-form-item>
          <a-form-item>
            <a-button
              style="margin-top: 4px"
              type="primary"
              class="search_Button confirm"
              @click="onSubmit"
              >确定</a-button
            >
            <a-button
              style="margin-left: 10px; border-radius: 2px 2px"
              @click="resetForm"
              >重置</a-button
            >
          </a-form-item>
        </a-form>
      </div>
    </a-card>

    <!-- <CommonTable
      ref="commonTable"
      :is-select="true"
      :columns="columns"
      :dataSource="dataSource"
      :total="dataSource.length"
      :isLoading="isLoading"
      @getPageParams="getPageParams"
      @get-table-sort="getTableSort"
      @getSelectColumn="getSelectColumn"
    >
      <template #bodyCell="{ column, text,record }">
        <template v-if="column.dataIndex === 'operation'">
        <span>
          <i class="details" type="primary" @click="onView(column, text, record)">查看详情</i>
        </span>
        </template>comment_content_title
        <template v-else-if="column.dataIndex ==='image'">
          <a-image
            :width="30"
            src="https://zos.alipayobjects.com/rmsportal/jkjgkEfvpUPVyRjUImniVslZfWPnJuuZ.png"
          />
          {{ record.address }}
        </template>
      </template>
    </CommonTable> -->
    <!-- <a-button @click="handleBatchDelete">批量删除</a-button> -->
    <a-table
      :columns="columns"
      :dataSource="dataSource"
      :pagination="false"
      :loading="false"
      @change="handleTableChange"
      rowClassName="custom-row"
      :row-selection="{
        selectedRowKeys: state.selectedRowKeys,
        onChange: onSelectChange,
      }"
    >
      <template v-slot:bodyCell="{ record, column }">
        <!-- <span v-if="record.status=='success'" class="unread" @click="view(record)"> -->
        <span v-if="column.key === 'status'">
          <a-tag
            class="all-read-buitton"
            :bordered="false"
            :color="statusColor(record.status)"
            >{{ record.status }}</a-tag
          >
        </span>
        <span v-else-if="column.key === 'message'">
          <a-tag
            class="all-read-buitton"
            :bordered="false"
            :color="record.status"
            >{{ statusColor(record.status) }}</a-tag
          >{{ record[column.key] }}
        </span>
        <!-- <span v-else>
              {{ record[column.key] }}
            </span> -->
        <!-- </span> -->
        <!-- <span v-else class="read">{{ record[column.key] }}</span> -->
        <span v-else-if="column.key === 'action'">
          <a-tag
            class="all-read-buitton"
            style="color: #31bc63"
            :bordered="false"
            @click="doAction('reply', record)"
            >回复</a-tag
          >
          <a-tag
            class="all-read-buitton"
            style="color: #31bc63"
            :bordered="false"
            @click="doAction('delete', record)"
            >删除</a-tag
          >
          <a-tag
            class="all-read-buitton"
            style="color: #31bc63"
            :bordered="false"
            @click="doAction('view', record)"
            >查看</a-tag
          >
        </span>
      </template>
    </a-table>
    <div class="pagination-box">
      <a-row>
        <a-col :span="8">
          <a-tag
            color="error"
            :bordered="false"
            class="all-read-buitton"
            @click="doAction('batches')"
            >批量删除</a-tag
          >
        </a-col>
        <a-col :span="16">
          <a-pagination
            v-model:current="pagination.current"
            :page-size="pagination.pageSize"
            :total="pagination.total"
            show-size-changer
            show-quick-jumper
            size="small"
            :show-total="(total) => `共 ${pagination.total} 项数据`"
            @change="handleTableChange"
            class="pagination"
          />
        </a-col>
      </a-row>
    </div>
    <diaoReviewDetails
      :visible="isModalVisible"
      :message="modalMessage"
      @update:visible="isModalVisible = $event"
    />
  </div>
</template>

<script setup>
import { ref, reactive, toRaw, computed, h } from "vue";
// import CommonTable from "../../components/myTable/index.vue";
import diaoReviewDetails from "./diao-reviewDetails.vue";
import { cloneDeep } from "lodash";
import {
  MailOutlined,
  SyncOutlined,
  ExclamationCircleOutlined,
} from "@ant-design/icons-vue";

const columns = [
  {
    title: "用户名称",
    dataIndex: "name",
    key: "name",
    align: "center",
    resizable: true,
    // maxWidth: 200,
    // minWidth: 75,
    width: 100,
    sorter: false,
  },
  {
    title: "点评时间",
    width: 100,
    dataIndex: "age",
    align: "center",
    key: "age",
    sorter: true,
  },
  {
    title: "游戏评分",
    dataIndex: "tags",
    align: "center",
    key: "tags",
    width: 100,
    sorter: true,
  },
  {
    title: "评论内容",
    align: "center",
    dataIndex: "address",
    key: "2",
    width: 100,
    sorter: true,
  },
  {
    title: "设备型号",
    dataIndex: "image",
    align: "center",
    key: "3",
    width: 140,
  },
  {
    title: "回复数量",
    align: "center",
    dataIndex: "address",
    key: "name",
    width: 100,
  },
  {
    title: "点赞数量",
    align: "center",
    dataIndex: "address",
    key: "4",
    width: 100,
  },
  {
    title: "操作",
    dataIndex: "operation",
    key: "action",
    align: "center",
    // maxWidth: 200,
    minWidth: 75,
    width: 100,
    sorter: false,
  },
];

const dataSource = ref(
  Array.from({ length: 11 }, (_, i) => ({
    key: i.toString(),
    name: `Edrward ${i}`,
    age: 32,
    address: `London Park no. ${i}`,
    id: i,
    tags: ["cool", "teacher"],
    icon: "1",
    img: "1",
    c: "1",
    d: "1",
    e: "1",
    field: "1",
    GamepadButton: "1",
    GamepadButton: "1",
    h: "1",
    g: "1",
    j: "1",
  }))
);
const refreshData = () => {
  console.log("refreshData: ", "refreshData");
};
const formRef = ref();
const formState = reactive({
  name: "",
  region: undefined,
  date1: undefined,
  keyword: "",
});
const onSubmit = () => {
  console.log("values", formState, toRaw(formState));
};
const resetForm = () => {
  formRef.value.resetFields();
};
const pagination = ref({
  current: 1,
  pageSize: 20,
  total: dataSource.value.length,
});

const handleTableChange = (page, pageSize) => {
  console.log(
    "handleTableChange=>分页回调pag, filters, sorter",
    page,
    pageSize
  );
  console.log("handleTableChange=>pagination", pagination.value);
  pagination.value.current = page;
  if (pageSize) {
    pagination.value.pageSize = pageSize;
  }
  // getList();//重新获取列表
};
const state = reactive({
  selectedRowKeys: [],
  loading: false,
});
const hasSelected = computed(() => state.selectedRowKeys.length > 0);
const start = () => {
  state.loading = true;
  setTimeout(() => {
    state.loading = false;
    state.selectedRowKeys = [];
  }, 1000);
};
const onSelectChange = (selectedRowKeys) => {
  console.log("selectedRowKeys changed: ", selectedRowKeys);
  state.selectedRowKeys = selectedRowKeys;
};

const isLoading = ref(false);
const commonTable = ref(null);

const getPageParams = (start, length) => {
  console.log("分页数据：", start, length);
};

const getSelectColumn = (rows) => {
  console.log("选择的数据：", rows);
};

const getTableSort = (sorter) => {
  if (sorter.order) {
    console.log(
      sorter.order === "ascend" ? "升序" : "降序",
      "排序表头字段：",
      sorter.field
    );
  } else {
    console.log("默认顺序----");
  }
  console.log("排序数据：", sorter);
};

const onView = (item) => {
  console.log("View item:", item);
};

const doAction = (action, row) => {
  console.log("row: ", row);
  console.log("action: ", action);
  // dataSource.value = dataSource.value.filter(item => item.key !== key);
  // if(state.selectedRowKeys.length){
  //   console.log('state.selectedRowKeys: ', state.selectedRowKeys);
  // }
  if (action === "delete") {
    console.log("action:delete ", action);
    dataSource.value = dataSource.value.splice(0, 1, row.key);
  } else if (action === "batches" && state.selectedRowKeys.length) {
    console.log("batches: ", 1111);
    console.log("state.selectedRowKeys: ", state.selectedRowKeys);
  } else if (action === "reply") {
    console.log("row: ", row);
  } else if (action === "view") {
    console.log("action:view ", action);
    isModalVisible.value = true;
    modalMessage.value = row;
  }
};
const isModalVisible = ref(false);
const modalMessage = ref(null);

const handleAdd = () => {
  const newData = {
    key: `${dataSource.value.length}`,
    name: `Edward King ${dataSource.value.length}`,
    age: 32,
    address: `London, Park Lane no. ${dataSource.value.length}`,
  };
  dataSource.value.push(newData);
};
</script>

<style lang="less" scoped>
@import url("./index.less");
</style>
<style lang="less" scoped>
.read {
  color: black;
}
.unread {
  color: black;
  cursor: pointer;
}
.pagination-box {
  margin-top: 10px;
  font-size: 14px;
  color: #31bc63;
}
.pagination {
  text-align: right;
}
.all-read-buitton {
  cursor: pointer;
}
</style>
